<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta charset="utf-8">
	    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	    <meta name="apple-mobile-web-app-status-bar-style" content="black">
	    <meta name="apple-mobile-web-app-capable" content="yes">
	    <meta name="format-detection" content="telephone=no">
	    <meta name="format-detection" content="address=no">
	    <link rel="stylesheet" type="text/css" href="css/j-shouye.css"/>
	    <link rel="stylesheet" type="text/css" href="css/j-reset.css"/>
	    <link rel="stylesheet" type="text/css" href="css/j-common.css"/>
	    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
	    <script src="js/jquerys-1.7.2.min.js" type="text/javascript"></script>
		<script src="js/swiper.jquery.min.js" type="text/javascript"></script>
		<script src="js/j-rem.js" type="text/javascript"></script>
		<script src="js/j-index.js" type="text/javascript"></script>
		<title>最新-热门-折扣</title>
	</head>
	<body>
	      
		  <div class="wrap color1">

		  	 <div class="nav-title">
		  	 	  <i class="nav-list"></i>
		  	 	  <a class="back" href="index.html"></a>
		  	 	  <p class="nav-title-name">最新</p>
		  	 </div>
		  	
		  	<div class="nav-tab-con">
		  		<ul id="nav-tab">
			  		<a id="btn1" class="default" href="#">最新</a>
			  		<a id="btn2" href="#">热门</a>
			  		<a id="btn3" href="#">折扣</a>
			  	</ul>
		  	</div>
		  	
		  	<div class="nav-container">

		  		<div class="swiper-wrapper">
		  			<div class="swiper-slide">
		  			<!-- 最新商品 -->
		  				 <div class="best-new">
			  	  	 	 	 <div class="sale-swiper">
					  	  	    <div class="swiper-wrapper">
									<div class="swiper-slide">
										<a href=""><img src="img/hot-sell.png"/></a>
									</div>
					  	  	   	  	<div class="swiper-slide">
					  	  	   	  		 <a href=""><img src="img/hot-sell.png"/></a>
					  	  	   	  	</div>
					  	  	   	  	<div class="swiper-slide">
					  	  	   	  		<a href=""><img src="img/hot-sell.png"/></a>
					  	  	   	  	</div>
					  	  	   	  	<div class="swiper-slide">
					  	  	   	  		<a href=""><img src="img/hot-sell.png"/></a>
					  	  	   	  	</div>
					  	  	   	 </div>
						  	  	 <div class="swiper-pagination  sale1">
						  	  	 </div>
						  	  </div>

						     <div class="nav-con-kid">

								<!-- <div class="juan-mask"></div> -->
						  	  	  <div class="roll">
						  	  	  	 <span class="roll-num">￥20</span>
						  	  	  	 <span class="i-want">我要领卷<i class="go-down"></i>
						  	  	  	 </span>
						  	  	  	 <!-- 我要领取卷的布局 -->
						  	  	  	 	<div class="juan">
											<div class="juan-wrap">
												 <i class="juan-btn"></i>
												 <div class="juan-row clearfix">
													 <span class="juan-num fl">￥20</span>
								  	  	  	         <span class="receive fr">领取</span>
												 </div>
												 <div class="juan-row clearfix">
													 <span class="juan-num fl">￥60</span>
								  	  	  	         <span class="receive fr">领取</span>
												 </div>
												 <div class="juan-row clearfix">
													 <span class="juan-num fl">￥101110</span>
								  	  	  	         <span class="receive fr">领取</span>
											     </div>
											</div>
						  	  	  	    </div>
						  	  	  </div>
						  	  	</div>  


						  	  	<!-- 产品容器部分 -->
						  	  	<div class="product-container">

							  	  <div class="product">
							  	      <i class="city"></i>
							  	  	  <i class="collect"></i>
							  	  	  <img class="pro-new" src="img/new.png"/>
							   	   <a class="pro-icon" href="pro-index.html">
							   	      <img src="img/pro1.png">
							   	   </a>
							   	   <a class="pro-icon1-name" href="pro-index.html">Hopes Relief湿疹膏</a>
								   	   <div class="hx"> <img class="hx-icon" src="img/hx.png"></div>
								   	   <span class="pro1-price">￥327.00</span>
								   </div>

								   <div class="product">
							  	      <i class="city"></i>
							  	  	  <i class="collect"></i>
							  	  	  <img class="pro-new" src="img/new.png"/>
								   	   <a class="pro-icon" href="pro-index.html">
							   	      <img src="img/pro1.png">
							   	   </a>
							   	   <a class="pro-icon1-name" href="pro-index.html">Hopes Relief湿疹膏</a>
								   	   <div class="hx"> <img class="hx-icon" src="img/hx.png"></div>
								   	   <span class="pro1-price">￥327.00</span>
								   </div>
									
									<div class="product">
							  	      <i class="city"></i>
							  	  	  <i class="collect"></i>
							  	  	  <img class="pro-new" src="img/new.png"/>
								   	   <a class="pro-icon" href="pro-index.html">
							   	      <img src="img/pro1.png">
							   	   </a>
							   	   <a class="pro-icon1-name" href="pro-index.html">Hopes Relief湿疹膏</a>
								   	   <div class="hx"> <img class="hx-icon" src="img/hx.png"></div>
								   	   <span class="pro1-price">￥327.00</span>
								   </div>

								   <div class="product">
							  	      <i class="city"></i>
							  	  	  <i class="collect"></i>
							  	  	  <img class="pro-new" src="img/new.png"/>
								   	   <a class="pro-icon" href="pro-index.html">
							   	      <img src="img/pro1.png">
							   	   </a>
							   	   <a class="pro-icon1-name" href="pro-index.html">Hopes Relief湿疹膏</a>
								   	   <div class="hx"> <img class="hx-icon" src="img/hx.png"></div>
								   	   <span class="pro1-price">￥327.00</span>
								   </div>
							  	</div>
				  		 </div>
		  			</div>

		  			<!-- 热门商品 -->
		  			<div class="swiper-slide">
		  				 <div class="best-new">
			  	  	 	 	 <div class="sale-swiper">
					  	  	    <div class="swiper-wrapper">
									<div class="swiper-slide">
										<a href=""><img src="img/hot-sell.png"/></a>
									</div>
					  	  	   	  	<div class="swiper-slide">
					  	  	   	  		 <a href=""><img src="img/hot-sell.png"/></a>
					  	  	   	  	</div>
					  	  	   	  	<div class="swiper-slide">
					  	  	   	  		<a href=""><img src="img/hot-sell.png"/></a>
					  	  	   	  	</div>
					  	  	   	  	<div class="swiper-slide">
					  	  	   	  		<a href=""><img src="img/hot-sell.png"/></a>
					  	  	   	  	</div>
					  	  	   	 </div>
						  	  	 <div class="swiper-pagination  sale1">
						  	  	 </div>
						  	  </div>
						  	  <div class="nav-con-kid">
						  	  	 <!-- <div class="juan-mask"></div> -->
						  	  	  <div class="roll">
						  	  	  	 <span class="roll-num">￥20</span>
						  	  	  	 <span class="i-want">我要领卷<i class="go-down"></i>
						  	  	  	 </span>
						  	  	  	 <!-- 我要领取卷的布局 -->
						  	  	  	 <div class="juan">
											<div class="juan-wrap">
											<i class="juan-btn"></i>
											 <div class="juan-row clearfix">
												 <span class="juan-num fl">￥20</span>
							  	  	  	         <span class="receive fr">领取</span>
											 </div>
											 <div class="juan-row clearfix">
												 <span class="juan-num fl">￥60</span>
							  	  	  	         <span class="receive fr">领取</span>
											 </div>
											 <div class="juan-row clearfix">
												 <span class="juan-num fl">￥101110</span>
							  	  	  	         <span class="receive fr">领取</span>
											 </div>
											</div>
						  	  	  	 </div>
						  	  	  </div>
						  	  	  </div>

						  	  	  <div class="product-container">
									   <div class="product">
									   	   <i class="city"></i>
									   	   <i class="collect"></i>
									   	   <img class="pro-new" src="img/hot.png"/>
									   	   <a class="pro-icon" href="pro-index.html">
									   	      <img src="img/pro1.png">
									   	   </a>
									   	   <a class="pro-icon1-name" href="pro-index.html">Hopes Relief湿疹膏</a>
									   	   <div class="hx"> <img class="hx-icon" src="img/hx.png"></div>
									   	   <span class="pro1-price">￥327.00</span>
									   	   <span class="sold">已售<span class="sold-num">3000</span>件</span>
									   </div>
									   <div class="product">
									   	   <i class="city"></i>
									   	   <i class="collect"></i>
									   	   <img class="pro-new" src="img/hot.png"/>
									   	   <a class="pro-icon" href="pro-index.html">
									   	      <img src="img/pro1.png">
									   	   </a>
									   	   <a class="pro-icon1-name" href="pro-index.html">Hopes Relief湿疹膏</a>
									   	   <div class="hx"> <img class="hx-icon" src="img/hx.png"></div>
									   	   <span class="pro1-price">￥327.00</span>
									   	   <span class="sold">已售<span class="sold-num">3000</span>件</span>
									   </div>

									   <div class="product">
									   	   <i class="city"></i>
									   	   <i class="collect"></i>
									   	   <img class="pro-new" src="img/hot.png"/>
									   	   <a class="pro-icon" href="pro-index.html">
									   	      <img src="img/pro1.png">
									   	   </a>
									   	   <a class="pro-icon1-name" href="pro-index.html">Hopes Relief湿疹膏</a>
									   	   <div class="hx"> <img class="hx-icon" src="img/hx.png"></div>
									   	   <span class="pro1-price">￥327.00</span>
									   	   <span class="sold">已售<span class="sold-num">3000</span>件</span>
									   </div>


							  	  	 </div>
						  	  
				  		 </div>
		  			</div>



		  			<!-- 折扣商品 -->
		  			<div class="swiper-slide">
		  				 <div class="best-new">
			  	  	 	 	 <div class="sale-swiper">
					  	  	    <div class="swiper-wrapper">
									<div class="swiper-slide">
										<a href=""><img src="img/hot-sell.png"/></a>
									</div>
					  	  	   	  	<div class="swiper-slide">
					  	  	   	  		 <a href=""><img src="img/hot-sell.png"/></a>
					  	  	   	  	</div>
					  	  	   	  	<div class="swiper-slide">
					  	  	   	  		<a href=""><img src="img/hot-sell.png"/></a>
					  	  	   	  	</div>
					  	  	   	  	<div class="swiper-slide">
					  	  	   	  		<a href=""><img src="img/hot-sell.png"/></a>
					  	  	   	  	</div>
					  	  	   	 </div>
						  	  	 <div class="swiper-pagination  sale1">
						  	  	 </div>
						  	  </div>

						  	  <div class="nav-con-kid">
						  	  	  <!-- <div class="juan-mask"></div> -->
						  	  	  <div class="roll">
						  	  	  	<span class="roll-num">￥20</span>
						  	  	  	<span class="i-want">我要领卷<i class="go-down"></i></span>
						  	  	  	 <!-- 我要领取卷的布局 -->
						  	  	  	    <div class="juan">
											<div class="juan-wrap">
											<i class="juan-btn"></i>
											 <div class="juan-row clearfix">
												 <span class="juan-num fl">￥20</span>
							  	  	  	         <span class="receive fr">领取</span>
											 </div>
											 <div class="juan-row clearfix">
												 <span class="juan-num fl">￥60</span>
							  	  	  	         <span class="receive fr">领取</span>
											 </div>
											 <div class="juan-row clearfix">
												 <span class="juan-num fl">￥101110</span>
							  	  	  	         <span class="receive fr">领取</span>
											 </div>
											</div>
						  	  	        </div>
						  	  	     </div>

						  	  	  </div>


					  	  	  <div class="product-container">
							  	  <div class="product">
								   	   <img class="pro-new" src="img/counts.png"/>
								   	   <i class="collect"></i>
								   	   <i class="city"></i>
								   	   <a class="pro-icon" href="pro-index.html">
									   	      <img src="img/pro1.png">
									   	   </a>
									   	   
								   	   <span class="rest">剩余<span class="rest-num">1200</span>件</span>
								   	   <a class="pro-icon1-name" href="pro-index.html">Hopes Relief湿疹膏</a>
								   	   <div class="hx"> 
								   	      <img class="hx-icon" src="img/hx.png">
								   	    </div>
								   	   <span class="pro1-price-c">￥327.00</span>
								   	   <span class="sold p-price-old">￥327.00</span>
								   	   	
								   </div>
								   <div class="product">
								       <i class="city"></i>
								       <i class="collect"></i>
								   	   <img class="pro-new" src="img/counts-old.png"/>

								   	   <div class="pro-icon">
								   	      <div class="sell-cover">
											  <img src="img/sell-out.png">		
								   	      </div>
								   	      <img src="img/pro1.png">
								   	   </div>

								   	   <span class="pro-icon1-name">Hopes Relief湿疹膏</span>
								   	   <div class="hx"> 
								   	      <img class="hx-icon" src="img/hx.png">
								   	    </div>
								   	   <span class="pro1-price-c">￥327.00</span>
								   	   <span class="sold p-price-old">￥327.00</span>
								   	   	
								   </div>
								    <div class="product">
								   	   <img class="pro-new" src="img/counts.png"/>
								   	   <i class="collect"></i>
								   	   <i class="city"></i>
								   	   <a class="pro-icon" href="pro-index.html">
									   	      <img src="img/pro3.png">
									   	   </a>
									   	   
								   	   <span class="rest">剩余<span class="rest-num">1200</span>件</span>
								   	   <a class="pro-icon1-name" href="pro-index.html">Hopes Relief湿疹膏</a>
								   	   <div class="hx"> <img class="hx-icon" src="img/hx.png"></div>
								   	   <span class="pro1-price-c">￥327.00</span>
								   	   <span class="sold p-price-old">￥327.00</span>
								   	   	
								   </div>

								    <div class="product">
								   	   <img class="pro-new" src="img/counts.png"/>
								   	   <i class="collect"></i>
								   	   <i class="city"></i>
								   	   <a class="pro-icon" href="pro-index.html">
									   	      <img src="img/pro1.png">
									   	   </a>
									   	   
								   	   <span class="rest">剩余<span class="rest-num">1200</span>件</span>
								   	   <a class="pro-icon1-name" href="pro-index.html">Hopes Relief湿疹膏</a>
								   	   <div class="hx"> <img class="hx-icon" src="img/hx.png"></div>
								   	   <span class="pro1-price-c">￥327.00</span>
								   	   <span class="sold p-price-old">￥327.00</span>
								   	   	
								   </div>

						  	  	 </div>
						  	  
				  		 </div>
		  			</div>
		  		</div>
		  	</div>
		  </div>


	<div id="my-list-popup">
			<div class="popup-top">
				 <p class="popup-top-logo">logo</p>
				 <i class="popup-top-canc"></i>	
			</div>
			<a class="pop-new" href="news.html">消息 <i class="arrow-r"></i></a>

			<a class="pop-service color2 border1 clearfix" href="custom.html">
				<img class="pop-ser-icon fl" src="img/ser-icon1.png">
				<div class="pop-ser-cont fr">
						<p class="cont-top">客服 — 小张</p>
						<p class="cont-down">您好，请问有什么可以为您效劳的么?</p>
				</div>	
			</a>

			<a class="pop-service  clearfix border2" href="custom.html">
				<img class="pop-ser-icon fl" src="img/ser-icon2.png">
				<div class="pop-ser-cont fr">
						<p class="cont-top">客服 — 小李</p>
						<p class="cont-down">您好，请问有什么可以为您效劳的么?</p>
				</div>	
			</a>
			
			<div class="pop-new-wrap">
				<a class="pop-new" href="index.html">首页 <i class="arrow-r"></i></a>
				<a class="pop-new" href="shopping-car.html">购物车 <span class="shop-num">12</span> 
				<i class="arrow-r"></i></a>
				<a class="pop-new" href="#">我的 <i class="arrow-r"></i></a>
				<a class="pop-new" href="#">订单 <i class="arrow-r"></i></a>
				<a class="pop-new" href="z-myhelp.html">帮助中心 <i class="arrow-r"></i></a>
				<a class="pop-new" href="#">加入我们 <i class="arrow-r"></i></a>
				<a class="pop-new" href="hezuo.html">合作洽谈 <i class="arrow-r"></i></a>
			</div>
	</div>
	
	<div id="mask"></div>
	

	<script type="text/javascript">
	 $(document).ready(function(){
	 		var sale = new Swiper('.sale-swiper',{
		  	   	paginationClickable: true,
		  	   	loop:true,
		  	   	observer:true,
				observeParents:true,

//		        autoplay:3000,
		        slidesPerView: 1,
		        grabCursor : true,
		        pagination:'.swiper-pagination',
		  	   });
	
	   var tabsSwiper = new Swiper('.nav-container',{
	   		// allowSwipeToNext : false,
 			speed:1000,
 			onSlideChangeStart:function(tabsSwiper){
 				$('#nav-tab .default').removeClass('default');
 				$('#nav-tab a').eq(tabsSwiper.activeIndex).addClass('default');
 			}
		})
		 $("#nav-tab a").on('touchstart mousedown' , function(e){
		 	e.preventDefault()
		 	$("#nav-tab .default").removeClass('default');
		 	$(this).addClass('default');
		 	tabsSwiper.slideTo($(this).index())
		 })
	 	$("#nav-tab a").click(function(e){
	 		e.preventDefault()
	 	});

	 	$('.nav-list').click(function(){
		 	$("#my-list-popup").fadeIn(400);
			  $("#mask").fadeIn(200);
			  $("html,body").addClass("overfw");
		 });
		 $('.popup-top-canc').click(function(){
		 	 $("#my-list-popup").hide();
			  $("#mask").hide();
			 $("html,body").removeClass("overfw");
		 });

		 $('.juan-btn').click(function(event){
		 	$('.juan').removeClass('juan-picked');
		 	$('.juan-wrap').hide();
		 	// $("html,body").removeClass("overfw");
		 	// $('#mask').fadeOut(200);
		 	return false;
		 })

		 $('.roll').click(function(){
		 	$(this).find('.juan').fadeIn(200).addClass('juan-picked');
		 	 $('.juan-wrap').fadeIn(2000);

		 	// $(this).children('.juan-mask').fadeIn(300);
		 	// $('#mask').fadeIn(200);
		 	// $("html,body").addClass("overfw");
		 })

	 })
	</script>
    </body>	
</html>
